<!--钢筋保护层检测---钢筋保护层检测-1---查看-->
<template>
  <div class="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <!-- <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox> -->
        </div>
      </div>
      <tree :treeData="treeData" :checkData="checkData" name="engineerList" nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <div class="department_right_name">
        <div>{{ showName }}</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left left_select"></div>
        <!-- 顶部按钮 -->
        <div class="print">
          <div class="printTable">
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(companyId)"></el-button>

            <el-button type="primary" icon="el-icon-search" size="small" v-if="btnWatch && lr_view == true"
              @click="editText()">查看</el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="text_table">
        <el-table ref="multipleTableA" :data="tableData" style="width: 100%"
          :height="navigatepageNums > 1 ? 'calc(100% - 20px)' : '100%'" border default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="projectNo" v-loading="loading"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)" @row-click="getRowInfo" highlight-current-row
          @current-change="rowChange" stripe>
          <el-table-column fixed type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="projectNo" label="工程编号" width="260"></el-table-column>
          <el-table-column prop="projectFullName" label="工程名称" width="306"></el-table-column>
          <el-table-column prop="projectNature" label="工程类别" width="150">
          </el-table-column>
          <el-table-column prop="protectionNote" label="厚度设计值" width="85" align="center">
          </el-table-column>
          <el-table-column prop="shouldCheckCount" label="厚度应检测" width="85" align="center">
          </el-table-column>
          <el-table-column prop="checkedCount" label="厚度已检测" width="85" align="center">
          </el-table-column>
          <el-table-column prop="price" label="厚度完成率" width="90" align="center">
          </el-table-column>

          <el-table-column label="厚度资料" width="90" align="center">
            <template slot-scope="scope">
              <el-button @click="openDialog(scope.row)" @cell-dblclick="openDialog" type="text" size="small" v-if="scope.row.checkedCount > 0 && scope.row.protectionNote != ''
                ">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 查看弹框 -->
      <div id="departments">
        <el-dialog title="查看"  top="11.5%" :visible.sync="dialogCheckVisible" v-loading="loadingCheckDialog"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody" :style="{ height: '500px' }">

            <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" :data="CheckList"
              style="width: 100%" height="300" stripe>
              <el-table-column type="index" width="50" align="center" label="序号">
              </el-table-column>
              <el-table-column prop="fProjectname" label="建设项目简称" width="150">
                <template slot-scope="scope">
                  <div class="lineBoxhidden">
                    <a href="javascript:;" :title="scope.row.fProjectname">{{
                      scope.row.fProjectname
                    }}</a>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="fChecktype" label="检测类型" width="95">
              </el-table-column>
              <el-table-column prop="fCheckcompanyname" label="检测单位" width="105">
              </el-table-column>
              <el-table-column prop="fCheckdates" label="回弹检测时间" width="95">
              </el-table-column>
              <el-table-column prop="fCheckresult" label="回弹检测结果" width="95">
              </el-table-column>
              <el-table-column prop="fChecksituationdescription" label="检测情况概述" width="95">
              </el-table-column>
              <el-table-column prop="fRecordername" label="记录人" width="80">
              </el-table-column>
              <el-table-column label="详细信息" width="90" align="center">
                <template slot-scope="scope">
                  <el-button @click="openDialog1(scope.row)" @cell-dblclick="openDialog1" type="text" size="small">
                    详情
                  </el-button>
                </template>
              </el-table-column>
              <template slot="empty">
                <img style="width: 285px; height: 208px" src="@/assets/img/undata.png" alt="" />
                <div class="pageFlagText">暂时没有数据哦！</div>
              </template>
            </el-table>
          </div>
        </el-dialog>
      </div>
      <!--弹框 新增/编辑 -->
      <div class="Control-1 mechanism_dialog">
        <el-dialog title="详情"  :visible.sync="dialogTableVisible" v-loading="loadingDialog"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: dialogHeight }">
            <el-form :model="formData1" ref="formData">
              <div class="tableRow">
                <el-form-item label="检测类型" prop="fChecktype" :label-width="formLabelWidth">
                  <el-select :disabled="dis" v-model="formData1.fChecktype" placeholder="请选择检测类型"
                    @change="optionChange($event)">
                    <el-option v-for="(v, i) in Checktype" :key="i" :label="v.fItemValue" :value="v.fItemValue"
                      :disabled="v.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="检测单位" prop="fCheckcompanyname" :label-width="formLabelWidth">
                  <el-input v-model="formData1.fCheckcompanyname" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>

              <div class="tableRow">
                <el-form-item label="保护层厚度检测时间" prop="fCheckdates" :label-width="formLabelWidth">
                  <el-date-picker v-model="formData1.fCheckdates" type="date" :disabled="dis" value-format="yyyy-MM-dd"
                    placeholder="选择日期" autocomplete="off">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="厚度检测结果" prop="fCheckresult" :label-width="formLabelWidth">
                  <el-select :disabled="dis" v-model="formData1.fCheckresult" placeholder="请选择厚度检测结果">
                    <el-option v-for="(v, i) in detectionResult" :key="i" :label="v.text" :value="v.text">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="tableRow">
                <el-form-item label="检测情况概述" prop="fChecksituationdescription" :label-width="formLabelWidth">
                  <el-input v-model="formData1.fChecksituationdescription" autocomplete="off" placeholder="请输入"
                    :disabled="dis"></el-input>
                </el-form-item>
                <el-form-item label="记录人" prop="fRecordername" :label-width="formLabelWidth">
                  <el-input v-model="formData1.fRecordername" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>
              <!-- 厚度检测记录表 -->
              <div class="tableRow SelectTime">
                <el-form-item label="厚度检测记录表" prop="fThicknessrecordfile" :label-width="formLabelWidth" class="enclosure"
                  style="height: 100%">
                  <el-input v-show="false" v-model="formData1.fThicknessrecordfile" autocomplete="off">
                  </el-input>
                  <div ref="fPhotofilelist" style="
                      height: 25px;
                      line-height: 25px;
                      width: 100%;
                      display: flex;
                      border: 1px solid #d1d7e2;
                      border-radius: 5px;
                      margin: 8px 0 2px 0;
                    ">
                    <div v-for="(v, i) in fPhotofilelist" :key="i" style="margin: 2px 3px; height: 87%"
                      @click="openPdfs(v)">
                      <img style="max-width: 100%; max-height: 100%" src="@/assets/img/pdf.png" />
                    </div>
                  </div>

                  <el-button v-show="!dis" type="primary" icon="el-icon-search" size="small" @click="operation('1')"
                    style="margin: 8px 0 2px 3px">操作</el-button>
                </el-form-item>
                <!-- 厚度检测报告 -->
                <el-form-item label="厚度检测报告" prop="fThicknessreportfile" :label-width="formLabelWidth" class="enclosure"
                  style="height: 100%">
                  <el-input v-if="false" v-model="formData1.fThicknessreportfile" autocomplete="off">
                  </el-input>
                  <div ref="fSourcefilelist" style="
                      height: 25px;
                      line-height: 25px;
                      width: 100%;

                      display: flex;
                      border: 1px solid #d1d7e2;
                      border-radius: 5px;
                      margin: 8px 0 2px 0;
                    ">
                    <div v-for="(v, i) in fSourcefilelist" :key="i" style="margin: 2px 3px; height: 87%"
                      @click="openPdfs(v)">
                      <img style="max-width: 100%; max-height: 100%" src="@/assets/img/pdf.png" />
                    </div>
                  </div>
                  <el-button v-show="!dis" type="primary" icon="el-icon-search" size="small" @click="operation('2')"
                    style="margin: 8px 0 2px 3px">操作</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>

      <div class="Control-2">
        <el-dialog :title="fFileName"  :visible.sync="dialogPdf">
          <div :style="{ height: dialogHeighta }">
            <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import tree from "@/components/public/common-trees";
import {
  getUserCompanyTreeList,
  getProtectionthicknessList,
  getProtectionByFormId,
  getProtectionListByProjectId,
} from "@/api/request.js";
export default {
  inject: ["reload"],
  name: "Home",
  data() {
    return {
      lr_view: null,
      name: "Steel-2",
      navigatepageNums: null,
      highlightBd: true, //左侧机构树停留背景色
      treelength: false, //左侧树显示隐藏
      checked: false, //查看下级
      showName: "未选择公司",
      dialogHeight: "",

      formData: {
        fId: "",
        fProjectid: "", //工程id
        fProjectname: "", //工程简称
        fProjectfullname: "", //工程全称
        fChecktype: "", //检测类型
        fCheckcompanyid: "", //检测单位id
        fCheckcompanyname: "", //检测单位简称
        fCheckcompanyfullname: "", //检测单位全称
        fCheckdates: "", // 保护层厚度检测时间
        fCheckresult: "", // 检测结果
        fChecksituationdescription: "", // 检测情况概述
        fRecorderid: "", // 记录人id
        fRecordername: "", // 记录人name
        fThicknessrecordfile: "", // 记录表id
        fThicknessreportfile: "", // 报告表id
        //用户信息
        userId: "", //当前登陆用户id
        userName: "", //当前登陆用户名称
        companyId: "", //当前登陆用户机构id
        companyName: "", //当前登陆用户机构名称
        //删除文件id集合--修改时传
        recordfiles: [],
      },
      formData1: {},
      formLabelWidth: "116px",
      Checktype: [], //检测类型
      detectionResult: [],
      dialogTableVisible: false,
      loadingDialog: false,
      tableData: [], //表格数据列表
      loading: false,
      btnWatch: true, //查看按钮显示隐藏
      row: null, //列表行详情
      Look: false,
      companyId: "", //当前选择的机构id
      // 查看
      dialogCheckVisible: false,
      loadingCheckDialog: false,
      CheckList: [], //检测记录
      fId: "",
      // 查看

      // 上传附件
      fPhotofilelist: [],
      fSourcefilelist: [],
      dis: false,
      dialogPdf: false,
      pdfUrl: "",
      fFileName: "",
      dialogHeighta: "",
      // 上传附件

      // 查看
      // 左侧机构树
      companyTree: "", //所有数据
      treeData: [], //左侧树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      userInfo: {}, //登录用户
      treeText: {
        companyId: null,
        userId: null,
      },
      // 左侧机构树
      checkData: [], //选中tree状态id
    };
  },
  components: {
    tree,
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));
    if (JSON.parse(sessionStorage.getItem("GxEmbedded_engineerList"))) {
      var id = JSON.parse(sessionStorage.getItem("GxEmbedded_engineerList"));
      this.checkData = [id.fCompanyid];
    }

    this.getHeight();
    this.getTree();
    this.btnRole(this.name);
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("GxEmbedded_ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });

        this.lr_view = btnStr.includes("lr_view");
      } else {
        this.lr_view = true;
      }
    },
    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);
            if (this.treeData[0].children == undefined) {
              this.treelength = false;
            } else {
              this.treelength = true;
            }
            if (this.checkData[0]) {
              this.showName = JSON.parse(
                sessionStorage.getItem("GxEmbedded_engineerList")
              ).fShortname;
              this.companyId = this.checkData[0];
            } else {
              this.showName = this.treeData[0].fShortname; //当前点击组织机构名称
              this.companyId = this.userInfo.companyId;
              this.checkData[0] = this.treeData[0].fCompanyid;

            }
            this.getDataList(this.companyId);
            // 列表
          } else {
            this.$message.error("获取组织机构失败", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("获取组织机构失败");
          return false;
        });
    },

    //查看下级
    // see() {
    //   if (this.checked == true) {
    //     this.getList.sublevel = 1;
    //   } else {
    //     this.getList.sublevel = 0;
    //   }
    //   this.getDataList();
    // },

    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fShortname; //顶部显示机构名
      this.companyId = data.fCompanyid;
      this.getDataList(this.companyId);
    },
    // 获取列表数据
    getDataList(id) {
      this.loading = true;
      this.row = null;
      getProtectionthicknessList({ companyId: id })
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            setTimeout(() => {
              that.loading = false;
              that.tableData = this.tranListToTreeData(res.data);
              that.navigatepageNums = that.tableData.length;
              that.$nextTick(() => {
                that.$refs.multipleTableA.doLayout();
              });
            }, 200);
          } else {
            this.$message.error("获取列表数据失败", res.msg);
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("获取列表数据失败");
          this.loading = false;
        });
    },
    // 对列表页进行上下级排列
    tranListToTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的children 重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.projectNo] = item;
      });

      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });

      return result;
    },
    // 点击当前行
    getRowInfo(e) {
      this.row = e;
      if (e.protectionNote != "" && e.checkedCount > 0) {
        this.btnWatch = true;
      } else {
        this.btnWatch = false;
      }
    },
    // 查看
    editText() {
      var id = {
        fProjectid: this.row.projectId,
        companyId: this.companyId,
      };
      this.getCheckList(id);
    },
    openDialog1(e) {
      this.fId = e.fId;

      if (this.fId != "") {
        this.loadingDialog = true;
        this.dialogTableVisible = true;
        this.dis = true;
        getProtectionByFormId({ fId: this.fId })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.dialogText = "查看厚度检测信息";
              that.loadingDialog = false;
              that.formData1 = res.data.thickness;
              that.fPhotofilelist = res.data.recordfile; //记录表文件
              that.fSourcefilelist = res.data.reportfile; //报告表文件
            } else {
              this.$message.error("厚度检测信息查询失败", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("厚度检测信息查询失败");
            this.loadingDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要查看的数据");
      }
    },
    openDialog(e) {
      this.dialogCheckVisible = true;
      var id = {
        fProjectid: e.projectId,
        companyId: this.companyId,
      };
      this.getCheckList(id);
    },
    // 获取检测记录
    getCheckList(id) {
      this.dialogCheckVisible = true;
      this.loadingCheckDialog = true;
      getProtectionListByProjectId(id)
        .then((res) => {
          if (res.errcode == 0) {
            this.loadingCheckDialog = false;
            this.CheckList = res.data;
          } else {
            this.$message.error("获取检测记录失败", res.msg);
            this.loadingCheckDialog = false;
          }
        })
        .catch(() => {
          console.log("获取检测记录失败");
          this.loadingCheckDialog = false;
        });
    },
    // 保留文件，点击查看
    openPdfs(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.name;
    },

    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },
    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      this.dialogHeight = h * 0.3 + "px";
      this.dialogHeighta = h * 0.888 + "px";
    },
  },
};
</script>

<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #000;
}
</style>